<template>
  
  <section class="main-structure">
    <header>
      <div class="main-structure-header">
        <a href="/topride/">
          <div class="log">Lin Travel</div>
        </a>
        <a href="https://insta360.starbucket.xyz/">
          <div class="log">Lin Store</div>
        </a>
      </div>
      <a href="#">
        <div class="menu-logo" @mouseenter="menuEnter()" @mouseleave="menuLeave()" v-on:click="menuClick"></div>
      </a>
      
    </header>

    <div class="content">
      <div>
        <video src="https://resource-cdn.obsbothk.com/video/island.mp4" autoplay muted loop></video>
        <video src="https://resource-cdn.obsbothk.com/video/spring.mp4" autoplay muted loop></video>
        <video src="https://resource-cdn.obsbothk.com/video/summer.mp4" autoplay muted loop></video>
        <video src="https://resource-cdn.obsbothk.com/video/autumn.mp4" autoplay muted loop></video>
        <video src="https://resource-cdn.obsbothk.com/video/winter.mp4" autoplay muted loop></video>
      </div>
      <div class="video-overlay"></div>
      <section class="text-desscription">
        <div>
          <h1>{{ CONTENT_INFO[data.key].h1 }}</h1>
          <h2>{{ CONTENT_INFO[data.key].h2  }}</h2>
          <p>{{ CONTENT_INFO[data.key].p }}</p>
        </div>
        <a href="#">Explore</a>
      </section>
    </div>

    <footer>
      <div class="footer-group">
        <a href="https://www.facebook.com/"><img src="/public/icons/facebook.svg" alt="facebook"></a>
        <a href="https://www.instagram.com/"><img src="/public/icons/instagram.svg" alt="instagram"></a>
        <a href="https://twitter.com/"><img src="/public/icons/twitter.svg" alt="twitter"></a>
      </div>
    </footer>

    <Menu
    class="index_menu"
    />

  </section>


  <section class="aside-menu" v-on:click="menu_bottom_click">
    <a href="#"><span>island</span></a>
    <a href="#"><span>spring</span></a>
    <a href="#"><span>spring</span></a>
    <a href="#"><span>autumn</span></a>
    <a href="#"><span>winter</span></a>
  </section>

  
</template>



<script lang="ts">
import '/public/data/content.js';
import  {CONTENT_INFO}  from '@/public/data/content.js';
import { gsap } from 'gsap'
import Loading from '~/components/Loading.vue';
  export default defineComponent ({
    async setup(){
      const data: any = reactive({
          ACTIVE: 'active',
          content: ref(),
          key: "island",
          video_index: ref(0)
      })
      gsap.registerPlugin(ScrollTrigger)
      let active_video: any[] | NodeListOf<Element>
      let active_video_overlay: any
      

      const handleVideo = () => {
        active_video = document.querySelectorAll('.main-structure .content video')
        active_video_overlay = document.querySelector('.main-structure .content .video-overlay')
        active_video[data.video_index].classList.remove(data.ACTIVE)
        active_video[data.video_index].classList.add(data.ACTIVE)
        active_video_overlay.className = 'video-overlay video-overlay-island'
      }



      const menuEnter = () => {
        const menu_enter = document.querySelector('.main-structure .menu-logo')
        menu_enter?.classList.toggle(data.ACTIVE)
      }

      const menuLeave = () => {
        const menu_leave = document.querySelector('.main-structure .menu-logo')
        menu_leave?.classList.remove(data.ACTIVE)
      }


      const menuClick = () => {
        const menu_click = document.querySelector('.main-structure')
        menu_click?.classList.toggle(data.ACTIVE)
      }

      const menu_bottom_click = () => {
        const menu_bottom_click = document.querySelectorAll('.aside-menu a')
        menu_bottom_click.forEach((button, index) => {
          button.addEventListener('click', () => {
            active_video.forEach((video) => {
            video.classList.remove(data.ACTIVE)
          })
          active_video[index].classList.add(data.ACTIVE)
          modify_content(index)
          })
        })
      }

      const modify_content = (index: number) => {
        switch(index) {
          case 0:
            data.key = 'island'
            active_video_overlay.className = 'video-overlay video-overlay-island'
            break;
          case 1:
            data.key = 'spring'
            active_video_overlay.className = 'video-overlay video-overlay-spring'
            break;
          case 2:
            data.key = 'summer'
            active_video_overlay.className = 'video-overlay video-overlay-summer'
            break;
          case 3:
            data.key = 'autumn'
            active_video_overlay.className = 'video-overlay video-overlay-autumn'
            break;
          case 4:
            data.key = 'winter'
            active_video_overlay.className = 'video-overlay video-overlay-winter'
            break
          default:
            break
        }
      }


      const loadAnimation = () =>{
        const tween = gsap.timeline({delay: 0.5})
        tween.from(".text-desscription", {duration: 0.5, ease: 'power2', opacity: 0, x: -40})
        tween.from(".footer-group", {duration: 0.5, ease: 'power2', opacity: 0, y: 40})
        tween.from(".index_menu", {duration: 0.3, ease: 'power2', opacity: 0, y: 40})
        tween.to(".text-desscription", {duration: 0.5, ease: 'power2', opacity: 1, x: 0})
        tween.to(".footer-group", {duration: 0.5, ease: 'power2', opacity: 1, x: 0})
        tween.to(".index_menu", {duration: 0.5, ease: 'power2', opacity: 1, y: -40})
        
      }

      onMounted(() => {
        handleVideo()
        loadAnimation()
        
      })
      return{ 
        data,
        CONTENT_INFO,
        menuEnter,
        menuLeave,
        menuClick,
        menu_bottom_click,
        modify_content,
      }
    }
  })


</script>






